<template>
	<div>
		<div class="delete" v-if="deleteShow">
			删除
		</div>
		<mt-swipe
		:auto="0"
		class="appManageCom-qy"
		>
		  <mt-swipe-item>
			<div 
			class="dra" v-for="element in myArray" 
			:key="element.id"
			>
				<div class="dra-content" @click.stop="change(element)">
					<div  class="innerDiv" v-if="element.template.length > 0" v-for="(v,k) in element.template" :key="k">
						<div></div>
					</div>
				</div>
				<div class="textD">{{element.name}}</div>
			</div>								  	
		  			
		  </mt-swipe-item>
		  <!--<mt-swipe-item>
		  	<div>
		  		2
		  	</div>
		  </mt-swipe-item>-->
		</mt-swipe>
		<appManageChild v-if="showChild" @hideChild="hideChild"> </appManageChild>
	</div>

</template>

<script>
	import draggable from 'vuedraggable'
	import Sortable  from 'sortablejs'
	import appManageChild from './appManageChild'
	export default {
		name:'appManageCom',
		data(){
			return {
				myArray:[],
				dragOption:{
					disabled:true,
					filter: ".dra"
				},
				showChild:false,
				deleteShow:false
			}
		},
		created(){
			for(let i = 0;i < 15;++i){
				this.myArray.push({
					id:i,
					name:i+'',
					template:[]
				});
			}
			for(let i = 0;i < 9;++i){
				this.myArray[3].template.push({
					id:i,
					name:i+''
				});
			}
		},
		mounted(){
			Array.prototype.insertSort = function(t,c){
				let temp = this[c];
				this.splice(c,1);
				this.splice(t,0,temp);
			}
			Array.prototype.merge = function(t,c){
				this.splice(c,1);	
			}
			let w = $('.appManageCom-qy .dra-content').width();
			$('.appManageCom-qy .dra-content').height(w+'px');
			$('.appManageCom-qy .mint-swipe-items-wrap').height($(window).height()-$('.mint-tabbar').height()-$('.appManageCom-qy .mint-swipe-indicators').height()+'px');
			
			
			let initPosition = [];
			let viewPosition = [];
			
			$('.dra').parent().css('position','relative');
			$('.dra').each(function(i){
				initPosition.push($(this).position())
				//viewPosition是从后台拿来的
				$(this).attr('viewPosition',i);
				viewPosition.push($(this).attr('viewPosition'));
			}).css('position','absolute').each(function(i){
				$(this).css({
					'top':initPosition[i].top+'px',
					'left':initPosition[i].left+'px',
					'z-index':1
				});
			});
			
				const collision = function(t,c){
					let offsetT = {
						left:t.offset().left,
						top:t.offset().top
					}
					let offsetC = {
						left:c.offset().left,
						top:c.offset().top
					}
					return (Math.abs(offsetT.left - offsetC.left)<w && Math.abs(offsetT.top - offsetC.top)<w)
				}
				
				
				let longPressObj = null;
				
				
			$('.dra-content').longPress((e,t)=>{
				this.deleteShow = true;
				let parentObj = $(t).parent().css({
					'z-index':10
				});
				longPressObj = t;
				let startPosition = {
					X:e.targetTouches[0].pageX,
					Y:e.targetTouches[0].pageY
				}
				
				let offset = {
					left:parentObj.offset().left,
					top:parentObj.offset().top
				}
				
				let distance = {
					left:startPosition.X - offset.left,
					top:startPosition.Y - offset.top,
				}
				let timeOut = undefined;
				
				
				let status = '';
				$(window).on('touchmove',(ev)=>{
					
					let e = window.event || ev;
					parentObj.css({
						left:e.targetTouches[0].pageX - distance.left,
						top:e.targetTouches[0].pageY - distance.top
					})
					
					clearTimeout(timeOut);
					timeOut = setTimeout(function(){
						status = '';
						let offset = {
							left:$(t).offset().left,
							top:$(t).offset().top
						}
						let currentIndex = null;
						$('.dra-content').each(function(j){
							if(this === t){
								currentIndex = j;
								return;
							}
						});
						$('.dra-content').each(function(i){
							if(this !== t){
								if(collision($(this),$(t))){
									let xO = Math.abs($(this).offset().left - $(t).offset().left);
									let yO = Math.abs($(this).offset().top - $(t).offset().top);
									let per = ((w - xO)*(w - yO))/(w*w);
									
									if(per < 0.3){
										return false;
									}else if(per >= 0.3 && per <= 0.7){
										status = 'insertSort';
										viewPosition.insertSort($('.dra').eq(i).attr('viewPosition'),$('.dra').eq(currentIndex).attr('viewPosition'));
								
										for(let i = 0;i < viewPosition.length;++i){
											$('.dra').eq(viewPosition[i]).attr('viewPosition',i);
										}
										
										$('.dra').each(function(j){
											if(currentIndex !== j){
												$(this).css({
													'top':initPosition[$(this).attr('viewPosition')].top+'px',
													'left':initPosition[$(this).attr('viewPosition')].left+'px'
												});
											}
										});
									}else{
										status = 'merge';
										$('.dra').attr('merge','');
										$('.dra').eq(i).attr('merge','target');
										$('.dra').eq(currentIndex).attr('merge','current');
									}
								}
							}
							
						});
					},200)
					
				});
				$(window,'.dra-content').on('touchend',(ev)=>{
						clearTimeout(timeOut);
						let e = window.event || ev;
						this.deleteShow = false;
						if(status === 'merge'){
							let current;
							let target;
							$('.dra').each(function(){
								if($(this).attr('merge') === 'current'){
									current = $(this).attr('viewPosition');
									$(this).css('display','none');
								}
								if($(this).attr('merge') === 'target'){
									target = $(this).attr('viewPosition');
									$(this).find('.textD').html('文件夹');
									$(this).attr('merge','')
								}
							});
							
							viewPosition.merge(target,current);
							for(let i = 0;i < viewPosition.length;++i){
								$('.dra').eq(viewPosition[i]).attr('viewPosition',i);
							}
						}
						
						$('.dra').each(function(j){
							$(this).css({
								'top':initPosition[$(this).attr('viewPosition')].top+'px',
								'left':initPosition[$(this).attr('viewPosition')].left+'px'
							});
						});
						
						$(window).off('touchmove');
						$(window,'.dra-content').off('touchend')
					});
			});
		},
		methods:{
			change(element){
				if(element.template.length > 0){
					this.showChild = true;
					console.log('33333333333333333333');
				}else{
					console.log('44444444444444444');
				}
			},
			hideChild(data){
				this.showChild = data;
			},
			drag(){
				console.log('drag');
			},
			drop(){
				console.log('drop');
			},
			checkMove(){
				console.log('checkMove');
			}
		},
		components:{
			draggable,
			appManageChild,
			Sortable
		}
	}
</script>

<style lang="less">
	.appManageCom-qy{
		.dra{
			width: 25%;
			padding: 15px;
			float: left;
		}
		.dra-content{
			border: 1px solid red;
			border-radius: 4px;
			margin-bottom: 5px;
		}
		.textD{
			line-height: 10px;
			text-align: center;
		}
		.mint-swipe-indicator.is-active{
			/*background: #000;*/
			/*opacity: 0.7*/
		}
		.innerDiv{
			float: left;
			width: 33.33333333%;
			height: 33.33333333%;
			padding: 3px;
		}
		.innerDiv>div{
			height: 100%;
			background: yellow;
		}
	}
	.delete{
		background: lightgoldenrodyellow;
		text-align: center;
		line-height: 30px;
	}
</style>